<template>
    <BaseComposite :config="config" :refreshEditor="refreshEditor" @updateData="updateData">
        <el-link href="https://gitee.com/renlin901017/rl-plus-docs/blob/master/docs/BaseButton.md" target="_blank" type="primary">更多用法请参考文档</el-link>
        <!-- template -->
        <div class="item template">
            <p class="label">~ 使用 ~</p>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p @click="copyText(BaseHtml)">{{BaseHtml}}</p>
            </el-tooltip>
        </div>
        <!-- 基础使用 -->
        <BaseItem label="基础用法" :text="BaseScript">
            <BaseButton :config="BaseConfig" @btnClick="btnClick"></BaseButton>
        </BaseItem>
        <!-- 组合使用（disabled、loading） -->
        <BaseItem label="组合使用（disabled、loading、class、style）" :text="GroupScript">
            <BaseButton :config="GroupConfig" @btnClick="btnClick"></BaseButton>
        </BaseItem>
        <!-- 自定义设置 -->
        <div class="item">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p class="custom" @click="copyText(JsonToString(config))">自定义设置</p>     
            </el-tooltip>
            <BaseButton :key="config" :config="config" @btnClick="btnClick"></BaseButton>
        </div>
        <template #props>
            <BaseForm :config="formConfig" ref="myForm">                
                <div class="btns">                    
                    <el-button type="primary" @click="useConfig" :auto-insert-space="true">应用</el-button>
                </div>
                <p class="tip">*auto-insert-space该属性不支持，可通过设置style字间距解决（letter-spacing:10px;）*</p>
            </BaseForm>         
        </template>
    </BaseComposite>
</template>

<script lang="ts" setup>
import { ref, isRef, reactive,nextTick } from 'vue';
import BaseComposite from '@/components/BaseComposite';
import BaseItem from '@/components/BaseItem';
import { ElButton,ElTooltip,ElLink} from "element-plus";
import dictJson from '@/assets/json';
import { BaseButton, BaseButtonType, BtnType,BaseForm,BaseFormType, BaseFormItemEleType, GroupComsType } from 'rl-plus';
import { deepClone, JsonToString } from 'rl-utils';
import { copyText } from '../../utils/index';
// 使用
const BaseHtml = `<BaseButton :config="config" @btnClick="btnClick" />`
// 基础用法
const BaseConfig=ref<BaseButtonType[]>([
    { name: '新增', type: BtnType.PRIMARY },
    { name: '修改', type: BtnType.SUCCESS },
    { name: '删除', type: BtnType.DANGER },
])

const BaseScript =`
import { ref} from 'vue';
import { BaseButton, BaseButtonType, BtnType} from 'rl-plus';
const config=ref<BaseButtonType[]>([
    { name: '新增', type: BtnType.PRIMARY },
    { name: '修改', type: BtnType.SUCCESS },
    { name: '删除', type: BtnType.DANGER },
])`
// 组合使用
const GroupConfig=ref<BaseButtonType[]>([
    { name: 'disabled',disabled:true },
    { name: 'loading',loading:true },
    { name: 'class',class:'item-btn'},   
    { name: 'style',style:"color:red"},   
])
const GroupScript =`
import { BaseButton, BaseButtonType, BtnType} from 'rl-plus';
const config=ref<BaseButtonType[]>([
    { name: 'disabled',disabled:true },
    { name: 'loading',loading:true },
    { name: 'class',class:'item-btn'},   
    { name: 'style',style:"color:red"},   
])`
// 自定义设置
const config = ref<BaseButtonType[]>([
    { name: '新增', type: BtnType.PRIMARY ,},
    { name: '修改', type: BtnType.SUCCESS,},
    { name: '删除', type: BtnType.DANGER },   
])
// 备份数据
const initData = deepClone(config.value)
// 刷新JsonEditor
const refreshEditor = ref(true)
// form表单
const formConfig = reactive<BaseFormType>({
    eleType: GroupComsType.BASEFORM,
    labelWidth:200,
    config: [
        {
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'type',
            value:'',
            label: '类型',
            data: dictJson.types
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'plain',
            value:false,
            label: '朴素按钮'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'text',
            value:false,
            label: '文字按钮'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'bg',
            value:false,
            label: '背景颜色'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'link',
            value:false,
            label: '链接按钮'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'round',
            value:false,
            label: '圆角按钮'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'circle',
            value:false,
            label: '圆型按钮'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'loading',
            value:false,
            label: '加载状态'
        },
        {
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'loadingIcon',
            value:'',
            label: '加载中状态图标'
        },
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'disabled',
            value:false,
            label: '禁用'
        },
        {
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'icon',
            value:'',
            label: '图标'
        },
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'autofocus',
            value:false,
            label: '原生 autofocus 属性'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'nativeType',
            value:'',
            label: '原生 type 属性'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'hidden',
            value:false,
            label: '是否隐藏'
        },{
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'size',
            value:'',
            label: '尺寸',
            data: dictJson.sizes
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'class',
            value:'',
            label: '类'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'style',
            value:'',
            label: '样式'
        },
    ]
})
const myForm=ref(null)

const useConfig = () => {
    if (myForm.value) { 
        let newData = deepClone(myForm.value.newData)
        const dataKeys = Object.keys(newData)
        dataKeys.map(item => { 
            if (!newData[item]) { 
                delete newData[item]
            }
        })
        if (Object.keys(newData).length > 0) {
            config.value = initData.map(item => {
                item = { ...item, ...newData }
                return item
            })
            refreshEditor.value = false
            nextTick(() => {
                refreshEditor.value = true
            })
        } else { 
            config.value = initData
            refreshEditor.value = false
            nextTick(() => {
                myForm.value.resetForm()
                refreshEditor.value = true
            })
        }
    }
}
// JsonEditor数据同步
const updateData = (e) => { 
    config.value=isRef(e)&&e.value||e
}
const btnClick = (e) => { 
    console.log(e)
}
</script>

<style lang="scss" scoped>
    @import "../../assets/css/index.scss";
    .tip{
        color: #999;
        text-align: center;
        padding: 10px;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
</style>